<template>
  <div v-if="visible" class="gyk-common-search-box">
    <el-form size="small" :inline="true" v-model="searchForm" class="demo-form-inline" :label-width="labelWidth">
      <el-form-item :key="item.columnId" v-for="(item, index) in searchColumnInfoList" :label="item.columnComment">
        <!-- 先判断是否是外键 -->
        <el-select v-model="searchForm[item.javaField]" filterable
          v-if="item.isForeignKey == '1' && foreignKeyMap[item.javaField] && foreignKeyMap[item.javaField].dataList">
          <el-option v-for="dataItem in foreignKeyMap[item.javaField].dataList"
            :key="dataItem[foreignKeyMap[item.javaField].option.value]"
            :label="dataItem[foreignKeyMap[item.javaField].option.label]"
            :value="dataItem[foreignKeyMap[item.javaField].option.value]" />
        </el-select>
        <!-- 输入框 -->
        <el-input v-else-if="item.htmlType == 'input'" v-model="searchForm[item.javaField]"
          :placeholder="`请输入${item.columnComment}`" clearable @keyup.enter.native="handleQuery" />

        <!-- 字典选择框 -->
        <el-select v-else-if="item.dictType &&
          (item.htmlType == 'select' || item.htmlType == 'radio')
          " v-model="searchForm[item.javaField]" :placeholder="`请选择${item.columnComment}`" filterable clearable>
          <el-option v-for="dict in dictMap.get(item.dictType)" :key="dict.dictValue" :label="dict.dictLabel"
            :value="dict.dictValue" />
        </el-select>

        <!-- 日期，条件不是BETWEEN -->
        <el-date-picker v-else-if="item.htmlType == 'datatime' && item.queryType != 'BETWEEN'
          " clearable v-model="searchForm[item.javaField]" type="date" value-format="yyyy-MM-dd"
          :placeholder="`请输入${item.columnComment}`">
        </el-date-picker>

        <!-- 日期，条件为BETWEEN -->
        <el-date-picker v-else-if="item.htmlType == 'datatime' && item.queryType == 'BETWEEN'
          " v-model="searchForm[item.javaField]" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const defProps = withDefaults(defineProps<{
  // 是否展示
  visible: boolean,
  // label的宽度
  labelWidth: string,
  // 查询字段信息
  searchColumnInfoList: any[],
  // 外键关系映射
  foreignKeyMap: Map<string, any>,
  // 字典关系映射
  dictMap: Map<string, any>,
  // 查询表单
  searchForm: any,
}>(), {
  visible: false,
  labelWidth: '180px',
  searchColumnInfoList: () => [],
  foreignKeyMap: () => new Map<string, any>(),
  dictMap: () => new Map<string, any>(),
  searchForm: () => ({})
})

const emits = defineEmits<{
  (e: 'handleQuery'): void,
  (e: 'reset'): void
}>()

// 进行搜索
const handleQuery = () => {
  emits("handleQuery")
}

// 重置查询条件
const resetQuery = () => {
  emits("reset")
}

</script>

<style lang="scss" scoped></style>